<template>
    <div class="h-20 bg-slate-100 flex flex-start items-center border-b-gray-300 border fixed top-0 w-full">
        <div class="w-auto h-5 p-5 mx-1 flex justify-center items-center hover:cursor-pointer hover:text-sky-500 hover:shadow" v-for="(item,index) in switchBtns" @click="choose(item)">
            {{ item.label }}
        </div>    
    </div>
</template>

<script setup lang="ts">
import { reactive,defineEmits } from 'vue';

const emit = defineEmits(['choose'])

const switchBtns = reactive([
    {
        label:"组合和选项的差异",
        to:"/dif"
    },
    {
        label:"组合响应式",
        to:"/react"
    },
    {
        label:"计算属性",
        to:"/computed"
    },
    {
        label:"hooks",
        to:"/hooks"
    },
])
const choose = (item : any)=>{
    console.log("choose : ",item.to);
    emit("choose",item.to)
}
</script>

<style scoped>

</style>